<template>
  <div ref="dom"></div>
</template>

<script>
import echarts from "echarts";
import { on, off } from "@/libs/tools";
export default {
  name: "serviceRequests",
  data() {
    return {
      dom: null,
      barData: 0,
      colors: ["#2d8cf0", "#14CC82", "#FDCC47"]
    };
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    data: {
      type: Object,
      default: () => {}
    },
    yName: {
      type: String,
      default: "权数"
    }
  },
  watch: {
    barData(val) {}
  },
  created() {},
  methods: {
    resize(val) {
      this.dom.resize();
    },
    bar() {
      console.log(this.data);
      const option = {
        color: this.colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false }
          }
        },
        legend: {
          data: ["得分率", "得分", "权重"],
          x: "80%"
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false
            },
            data: this.data.name,
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                fontSize: 18
              }
              // formatter: function(params, index) {
              //   var newParamsName = "";
              //   var splitNumber = 5;
              //   var action = false;
              //   var activeId = action ? 0 : -1;
              //   var splitNum = [3, 3, 4, 6];
              //   var paramsNameNumber = params && params.length;
              //   if (paramsNameNumber >= 10) {
              //     params = params.substring(0, 8);
              //     params += ".....";
              //   }
              //   if (paramsNameNumber <= 4) {
              //     splitNumber = splitNum[0] || 4;
              //   } else {
              //     params = params && params.slice(0, 21);
              //   }

              //   var provideNumber = 1; // 一行显示几个字
              //   var rowNumber =
              //     Math.ceil(paramsNameNumber / provideNumber) || 0;
              //   if (paramsNameNumber > provideNumber) {
              //     for (var p = 0; p < rowNumber; p++) {
              //       var tempStr = "";
              //       var start = p * provideNumber;
              //       var end = start + provideNumber;
              //       if (p === rowNumber - 1) {
              //         tempStr = params.substring(start, paramsNameNumber);
              //       } else {
              //         tempStr = params.substring(start, end) + "\n";
              //       }
              //       newParamsName += tempStr;
              //     }
              //   } else {
              //     newParamsName = params;
              //   }
              //   let arr = newParamsName.split("\n");
              //   return arr.join("\n");
              // }
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "得分率",
            type: "bar",
            animationDuration: 5000,
            data: this.data.scoreRate,
            barWidth: "15",
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed"
                }
              }
            }
          },
          {
            name: "得分",
            type: "line",
            symbol: "circle", // 设定为实心点
            symbolSize: 8, // 设定实心点的大小
            animationDuration: 5000,
            data: this.data.score,

            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#4CAF50",
                  width: 3
                }
              }
            }
          },
          {
            name: "权重",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            animationDuration: 5000,
            data: this.data.weight,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FDBC0A",
                  width: 3
                }
              }
            }
          }
        ]
      };
      this.$nextTick(() => {
        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option, true);
        on(window, "resize", this.resize);
        this.dom.on("click", params => {
          this.$emit("clickData", params);
        });
      });
    }
  },
  mounted() {
    this.bar();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  }
};
</script>
